<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>
		<!--媒体查询示例-->
		<style type="text/css">
			.container {
				width: 100%;
			}
			
			.item {
				box-sizing: border-box;
				width: 100%;
				display: inline-block;
				height: 30px;
				border: 2px solid deepskyblue;
				border-bottom: 4px double deepskyblue;
				margin-bottom: 10px;
				margin-right: 10px;
				background: lightcyan;
				text-indent: 10px;
			}
			
			@media only screen and (min-width:768px) {
				.item {
					width: 48%;
					border-color: dodgerblue;
				}
			}
			@media only screen and (min-width:1024px ) {
				.item {
					width: 32%;
					border-color: yellowgreen;
				}
			}
			@media only screen and (min-width:1366px ) {
				.item {
					width: 24%;
					border-color: darkkhaki;
				}
			}
			@media only screen and (min-width:2560px ) {
				.item {
					width: 19%;
					border-color: wheat;
				}
			}
		</style>
	</head>

	<body>
		<div class="container" id="container">

		</div>
		<script type="text/javascript">
			"use strict";
			var container = document.getElementById("container");
			var fragment = new DocumentFragment();
			for(let i = 0; i < 100; i++) {
				var item = document.createElement("div");
				item.setAttribute("class", "item");
				item.innerText = "this is a item.code:" + i;
				fragment.appendChild(item);
			}
			container.appendChild(fragment);
		</script>
	</body>

</html>